<template>
    <div id="ApproveSteps">
        <div class="printJS-item">
            <div class="infoTitle">审批进度</div>
            <div class="tableWrap">
              <a-steps :current="current" size="small">
                <template v-for="(item, index) in stepList">
                <a-step :key="index" :title="item && item.checkMember" :sub-title="item&&item.checkTime" :description="item&&item.settingTypeName" >
                  <a-icon v-if="index === current" slot="icon" type="edit" />
                </a-step>
                </template>
              </a-steps>
            </div>
          </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import util from '@/util/util'

@Component
export default class ApproveSteps extends Vue {
    @Prop({ type: Object, default: () => ({}) }) searchObj!: any // 传值

    stepList: any[] = []
    current: any = 1
    init () {
        this.searchObj.phid && this.getList()
    }
    @Watch('searchObj')
    watchSearchObj () {
      this.searchObj.phid && this.$nextTick(() => {
        this.getList()
      })
    }
    getList () {
    this.$api.fjapproveCheckStepFetch(this.searchObj).then((res: any) => {
      console.log(res.data)
        const data = res.data
        this.current = data.findIndex((i: any) => i.checkStatus === 'un')
        if (data.length < 4) data.length = 4
        this.stepList = data
    }).catch()
    }
}
</script>

<style lang="scss">
    .printJS-item{
      background: #fff;
      margin-bottom: 20px;
      border-radius: 8px;
      .yszf_wrap{
        padding:30px 24px;
        display: flex;
        flex-wrap: wrap;
        div{
          margin-bottom: 10px;
        }
      }
      .stepWrap{
        padding:30px 24px;
        display: flex;
        .step-left{
          width: 58%;
          padding-right: 40px;
        }
        .step-right{
          border-left: 1px solid #ccc;
          padding: 4px 26px;
          color: rgba(0, 0, 0, 0.45);
          font-size:14px;
        }
      }
      .infoTitle{
        padding:24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        color:#333333;
        font-weight: bold;
        position: relative;
        &::after{
          content: '';
          width: 4px;
          height: 20px;
          background: #437DFC;
          position:absolute;
          top:50%;
          left: 0;
          margin-top: -10px;
          border-radius: 6px;
        }
      }
      .form-row{
        padding: 24px 24px 14px;
        display: flex;
        flex-wrap: wrap;
        .form-col {
          width: 25%;
          flex-shrink: 0;
        }
      }
      /deep/ .ant-form-item{
        margin-bottom: 10px;
      }
      .tableWrap{
        padding:30px 24px
      }
      .table-wrap{
        width: 1000px;
        display:flex;
        flex-wrap: wrap;
        // margin-bottom: 20px;
        padding: 30px 24px;
        .table-item{
          width:33.33%;
          display: flex;
          align-items: center;
          line-height: 50px;
          border: 1px solid #d9d9d9;
          .item-label{
            padding: 0 8px;
            width: 122px;
            border-right: 1px solid #d9d9d9;
            background: rgb(244, 244, 244);
            font-weight: bold;
            text-align: center;
          }
          .item-right{
            padding: 0 8px;
            width: calc(100% - 122px);
          }
        }
      }
      .imgWrap{
        padding:0 24px;
        div{
          margin:0 20px 20px 0;
          .label{
            font-size: 14px;
            color: #000000;
          }
          .img-item{
            width:220px;
            height: 220px;
            margin: 10px 10px 10px 0;
          }
        }
      }
      .ysccWrap{
        padding:24px;
        .ysqk-item{
          margin-bottom: 20px;
          display: flex;
          flex-direction: column;
          .label{
            color: #000000;
            font-size: 14px;
          }
          .ysqk-text{
            width: 1148px;
            height: 104px;
            margin-top: 10px;
            padding: 14px 20px;
            background: rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(0, 0, 0, 0.15);
            font-size: 14px;
            color: #000;
          }
        }
        .ysqk-img{
          display: flex;
          .ysqk-img-l{
            display: flex;
            flex-direction: column;
            div{
              display:flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
          .ysqk-img-r{
            display: flex;
            flex-direction: column;
            div{
              display: flex;
              flex-wrap: wrap;
              img{
                width: 220px;
                height: 220px;
                margin: 10px 10px 10px 0;
              }
            }
          }
        }
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
      .pic-wrap{
        padding:15px 24px 40px;
        .img-item{
          width: 220px;
          height: 220px;
          margin: 10px 10px 10px 0;
        }
      }
    }
</style>
